<template>
  <div class="select-box flex js-sp">
    <div
      class="select flex js-sp align-center bd-borderBase point"
      v-if="!phone || type"
      @click="isSelect = !isSelect"
      v-clickout="close"
    >
      <!-- <flag :iso="selectedCountry.flag" /> -->
	  {{ selectedCountry.name }}
      +{{ selectedCountry.global_code }}
      <i :class="isSelect ? 'el-icon-caret-top' : 'el-icon-caret-bottom'"></i>
      <div class="countrys text-t1 text-14 second-bg point" v-if="isSelect">
        <div class="country" @click.stop="">
          <el-input
            prefix-icon="el-icon-search"
            v-model="inputCountry"
            @input="countryInput"
            :placeholder="$t('formTip.countryTip')"
          ></el-input>
        </div>
        <div
          class="country flex js-sp"
          @click.stop="select(item)"
          v-for="(item, index) in countrys"
          :key="index"
        >
          <!-- <div class="flex align-center relation">
            <flag :iso="item.flag" class="flex-shrink-0" />
            <div class="name">
              <MarqueeCountry
                :text="item[`name_${$store.state.user.local}`]"
              ></MarqueeCountry>
            </div>
            <span class="name">{{
              item[`name_${$store.state.user.local}`]
            }}</span>
          </div> -->
          <div>{{ item.name }}</div>
		  <div>+{{ item.global_code }}</div>
        </div>
      </div>
    </div>
    <el-input
      v-model="phoneNumber"
      :disabled="phone && !type ? true : false"
      @blur="endPhone"
      :maxlength="maxlength"
      :clearable="!type"
      :placeholder="$t('formTip.phoneTip')"
    ></el-input>
  </div>
</template>

<script>
import countrys from "@/utils/country.js";
import { getareas } from "@/api/user";
import { firstletterSort } from "@/utils/common";
import { positiveRule } from "@/utils/formValidation";
import { useStore } from "vuex";
import MarqueeCountry from "@/components/marqueeCountry/marqueeCountry.vue";
import { decimalDigitsInputFilter, toBeNumber } from "@/utils/common";
export default {
  name: "SelectCountry",
  props: {
    phone: String,
    type: Number,
    aresCode: String,
  },
  components: { MarqueeCountry },
  emits: ["selectCountry", "inputPhone"],
  data() {
    return {
      // countrys: firstletterSort(countrys, "name_zh"),
	  countrys:[],
      isSelect: false,
      phoneNumber: "", //手机
      selectedCountry: {}, //选择的城市
      inputCountry: "", //搜索城市
      default_phone_area_code: "",
      maxlength: null,
    };
  },
  computed: {
    systemInfo() {
      return this.$store.state.user.systemInfo;
    },
  },
  created() {
    if (this.systemInfo) {
      this.systemInfo?.forEach((ele) => {
        if (ele.key === "default_phone_area_code") {
          this.default_phone_area_code = ele.value;
        }
      });
    }
    this.$store = useStore();
    
	this.getarea()
  },
  methods: {
	  getarea(){
		  getareas().then((res) => {
			  if(res.code == 1){
				  this.countrys = res.data
				  this.selectedCountry = res.data[0]
				  
				  this.$emit("selectCountry", {
				    user_area_code: res.data[0].id
				  });
			  }
		  });
	  },
    // 选择国家
    select(item) {
      this.selectedCountry = item;
      this.$emit("selectCountry", {
        user_area_code: item.id
      });
      this.isSelect = false;
      if (item.area_code == "+1809") {
        this.maxlength = 7;
      } else {
        this.maxlength = null;
      }
    },
    // 输入完毕
    endPhone() {
      // 数字过滤，保留小数
      if (this.phoneNumber) {
        let tempV = toBeNumber(this.phoneNumber);
        if (this.selectedCountry.area_code == "+1809") {
          tempV = tempV.substring(0, 7);
        }
        this.phoneNumber = decimalDigitsInputFilter(tempV, 0);
      }
      this.$emit("inputPhone", {
        user_phone_number: this.phoneNumber,
        user_area_code: this.selectedCountry.id
      });
    },
    close() {
      this.isSelect = false;
    },
    // 搜索国家
    countryInput(val) {
      //  判断如果是搜索区号
      if (positiveRule.reg.test(val)) {
        this.countrys = countrys.filter((item) => {
          return item.area_code.indexOf(val) >= 0;
        });
      } else {
        this.countrys = countrys.filter((item) => {
          return (
            item[`name_${this.$store?.state?.user.local}`]?.indexOf(val) >= 0
          );
        });
      }
    },
  },
};
</script>

<style scoped lang="less">
.select-box {
  width: 100%;
  position: relative;
}
.select {
  width: 200px;
  height: 40px;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 4px;
  margin-inline-end: 14px;
}
.countrys {
  width: 100%;
  height: 200px;
  position: absolute;
  bottom: -205px;
  left: 0;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
  overflow-y: auto;
  z-index: 10;
}
.country {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
}
.name {
  margin-inline-start: 10px;
  width: 200px;
  overflow: hidden;
}
.relation {
  position: relative;
}
</style>
